<template>
  <div class="container">
    <!-- <div
      v-if="$route.params.id !== 'new' && $route.params.id !== 'recommed'"
      @click="show = true"
      class="top-bar"
    >
      <div class="left"><img src="@/assets/筛选.png" alt="" /> 品牌筛选</div>
      <img class="right" src="@/assets/发视频-assets/next.png" alt="" />
    </div> -->
    <div class="top-search">
      <div class="input-container">
        <input
          @click="$router.push('/search?action=relate')"
          class="search-input"
          placeholder="请输入关键词搜索"
          type="text"
        /><button
          @click="$router.push('/search?action=relate')"
          class="search-btn"
        ></button>
      </div>
    </div>
    <item-big-img
      :goodsLists="goodList"
      imgUrl="img_show"
      vipPrice="original_price"
      price="price"
    ></item-big-img>
    <load-more @loadMore="loadMore"></load-more>
    <yd-popup v-model="show" position="right" width="80%">
      <div class="title">
        品牌
      </div>
      <div class="brand-container">
        <div
          class="brand-cell"
          :class="{ active: !brandFilter }"
          @click="selectAll"
        >
          全部
        </div>
        <div
          class="brand-cell"
          :class="{ active: item.isChecked }"
          v-for="(item, index) in brandList"
          :key="item.id"
          @click="brandList[index].isChecked = !brandList[index].isChecked"
        >
          {{ item.zh_name }}
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import itemBigImg from "@/components/item-big-img.vue";
import {
  getCategoryGoods,
  getNewGood,
  getRecommendGood,
  getBrandList,
  getPointGoodList
} from "@/api/mall";
import loadMore from "@/components/load-more";
export default {
  data() {
    return {
      categoryList: [],
      goodList: [],
      touchPosition: 0,
      translate: 0,
      page: 1,
      isAll: false,
      loading: false,
      show: false,
      brandList: [],
      brandFilter: ""
    };
  },
  watch: {
    $route: function(val) {
      this.getGoodList(1);
    },
    brandList: {
      deep: true,
      handler(val) {
        let arr = [];
        val.forEach(item => {
          if (item.isChecked) arr.push(item.id);
        });
        this.brandFilter = arr.join(",");
      }
    },
    brandFilter: function(val) {
      this.page = 1;
      this.isAll = false;
      this.getGoodList(1, val);
    }
  },
  methods: {
    selectAll() {
      this.brandFilter = "";
      this.brandList = this.brandList.map(item => {
        item.isChecked = false;
        return item;
      });
    },
    loadMore() {
      if (this.loading || this.isAll || this.goodList.length === 0) return;
      this.loading = true;
      if (this.$route.path == "/point-good-list") {
        this.getPointGoodList(++this.page);
      } else if (this.$route.params.id === "new") {
        this.getNewGood(++this.page);
      } else if (this.$route.params.id === "recommend") {
        this.getRecommendGood(++this.page);
      } else {
        this.getGoodList(++this.page);
      }
    },
    getGoodList(page, brand) {
      getCategoryGoods({
        id: this.$route.params.id,
        page,
        brand: brand ? brand : undefined
      }).then(res => {
        if (res.status === 200) {
          if (page === 1) this.goodList = [];
          this.categoryList = res.data.data.brother;
          this.goodList.push(...res.data.data.commodity);
          if (res.data.data.commodity.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    },
    getNewGood(page) {
      getNewGood({
        page
      }).then(res => {
        if (res.status === 200) {
          if (page === 1) this.goodList = [];
          this.goodList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    },
    getRecommendGood(page) {
      getRecommendGood({
        page
      }).then(res => {
        if (res.status === 200) {
          if (page === 1) this.goodList = [];
          this.goodList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    },
    getPointGoodList(page) {
      getPointGoodList({ page }).then(res => {
        if (res.status === 200) {
          this.goodList.push(...res.data.data);
        }
      });
    }
  },
  created() {
    console.log(this.$route)
    if (this.$route.path == "/point-good-list") {
      this.getPointGoodList(1);
    } else if (this.$route.params.id === "new") {
      this.getNewGood(1);
    } else if (this.$route.params.id === "recommend") {
      this.getRecommendGood(1);
    } else {
      this.getGoodList(1);
      getBrandList({ id: this.$route.params.id }).then(res => {
        if (res.status === 200) {
          this.brandList = res.data.data.map(item => {
            return {
              ...item,
              isChecked: false
            };
          });
        }
      });
    }
  },
  components: {
    itemBigImg,
    loadMore
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  overflow: auto;
  padding-bottom: 1rem;
  .top-search {
    background-color: #fff;
    padding: 0.3rem 3.2%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    .input-container {
      width: 100%;
      position: relative;
    }
    .search-input {
      box-sizing: border-box;
      width: 100%;
      height: 1.24rem;
      border: none;
      vertical-align: top;
      font-size: 0.56rem;
      padding: 0 0 0 4.22%;
      border-radius: 0.16rem;
      background-color: rgb(245, 245, 245);
      font-size: "微软雅黑";
    }
    .search-btn {
      position: absolute;
      width: 1.24rem;
      height: 1.24rem;
      right: 0.3rem;
      top: 0rem;
      padding: 0;
      border: 0;
      background: none;
      background-image: url("../../assets/商城首页-assets/shousuo.png");
      background-repeat: no-repeat;
      background-size: 60% 60%;
      background-position: 50% 50%;
    }
  }
  .top-bar {
    background: #fff;
    display: flex;
    padding: 0 3.2%;
    justify-content: space-between;
    height: 2rem;
    align-items: center;
    .left {
      font-size: 0.64rem;
      display: flex;
      align-items: center;
      img {
        width: 0.9rem;
        margin-right: 0.24rem;
      }
    }
    .right {
      width: 0.45rem;
      height: 0.8rem;
    }
  }
  .title {
    font-size: 0.64rem;
    padding: 0.24rem;
  }
  .brand-container {
    display: flex;
    flex-wrap: wrap;
    .brand-cell {
      font-size: 0.64rem;
      border-radius: 0.12rem;
      background-color: rgb(245, 245, 245);
      padding: 0.45rem 0;
      text-align: center;
      width: 3.5rem;
      color: #666;
      margin: 0.15rem;
      transition-duration: 0.15s;
    }
    .active {
      background: rgb(202, 233, 254);
      color: rgb(2, 150, 253);
    }
  }
}
</style>
